<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>IP地址分类挑战</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    
    <!-- 配置Tailwind自定义颜色 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#165DFF',
                        secondary: '#6B7280',
                        success: '#22C55E',
                        danger: '#EF4444',
                        neutral: '#F3F4F6',
                        dark: '#1F2937',
                    },
                    fontFamily: {
                        inter: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .btn-shadow {
                box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
            }
            .btn-hover {
                transform: translateY(-2px);
                box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
            }
            .result-appear {
                animation: fadeIn 0.5s ease-in-out;
            }
            .ip-box-shadow {
                box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
            }
            @keyframes fadeIn {
                from { opacity: 0; transform: translateY(10px); }
                to { opacity: 1; transform: translateY(0); }
            }
        }
    </style>
</head>
<body class="bg-gradient-to-br from-blue-50 to-indigo-100 min-h-screen font-inter text-dark">
    <div class="container mx-auto px-4 py-8 max-w-4xl">
        <!-- 头部区域 -->
        <header class="mb-10 text-center">
            <h1 class="text-[clamp(2rem,5vw,3.5rem)] font-bold text-transparent bg-clip-text bg-gradient-to-r from-primary to-blue-600 mb-3">
                IP地址分类挑战
            </h1>
            <p class="text-lg text-secondary max-w-2xl mx-auto">
                测试你的网络知识！随机生成一个IP地址，判断它属于哪个类别
            </p>
        </header>
        
        <!-- 主内容区域 -->
        <main class="bg-white rounded-2xl shadow-xl p-6 md:p-10 mb-10 transform transition-all duration-300 hover:shadow-2xl">
            <!-- IP地址显示区域 -->
            <div class="mb-10">
                <div class="text-center mb-2 text-sm font-medium text-secondary">当前IP地址</div>
                <div id="ipDisplay" class="ip-box-shadow bg-neutral rounded-xl p-6 md:p-8 text-center text-[clamp(1.5rem,4vw,2.5rem)] font-bold text-dark transition-all duration-300 hover:scale-[1.02]">
                    生成的IP地址将显示在这里
                </div>
            </div>
            
            <!-- 分类按钮区域 -->
            <div class="mb-10">
                <div class="text-center mb-6 text-sm font-medium text-secondary">选择正确的分类</div>
                <div class="grid grid-cols-2 md:grid-cols-5 gap-4">
                    <button id="btnA" onclick="checkAnswer('A')" class="bg-primary hover:bg-primary/90 text-white rounded-xl py-4 px-2 transition-all duration-300 btn-shadow hover:btn-hover flex flex-col items-center justify-center">
                        <span class="text-2xl font-bold mb-1">A</span>
                        <span class="text-sm">0-127</span>
                    </button>
                    <button id="btnB" onclick="checkAnswer('B')" class="bg-blue-500 hover:bg-blue-500/90 text-white rounded-xl py-4 px-2 transition-all duration-300 btn-shadow hover:btn-hover flex flex-col items-center justify-center">
                        <span class="text-2xl font-bold mb-1">B</span>
                        <span class="text-sm">128-191</span>
                    </button>
                    <button id="btnC" onclick="checkAnswer('C')" class="bg-blue-400 hover:bg-blue-400/90 text-white rounded-xl py-4 px-2 transition-all duration-300 btn-shadow hover:btn-hover flex flex-col items-center justify-center">
                        <span class="text-2xl font-bold mb-1">C</span>
                        <span class="text-sm">192-223</span>
                    </button>
                    <button id="btnD" onclick="checkAnswer('D')" class="bg-blue-300 hover:bg-blue-300/90 text-white rounded-xl py-4 px-2 transition-all duration-300 btn-shadow hover:btn-hover flex flex-col items-center justify-center">
                        <span class="text-2xl font-bold mb-1">D</span>
                        <span class="text-sm">224-239</span>
                    </button>
                    <button id="btnE" onclick="checkAnswer('E')" class="bg-blue-200 hover:bg-blue-200/90 text-white rounded-xl py-4 px-2 transition-all duration-300 btn-shadow hover:btn-hover flex flex-col items-center justify-center">
                        <span class="text-2xl font-bold mb-1">E</span>
                        <span class="text-sm">240-255</span>
                    </button>
                </div>
            </div>
            
            <!-- 结果显示区域 -->
            <div id="resultDisplay" class="result-appear bg-neutral rounded-xl p-6 text-center text-xl font-medium transition-all duration-500 min-h-[100px] flex items-center justify-center">
                请选择一个分类来开始挑战
            </div>
        </main>
        
        <!-- 控制按钮 -->
        <div class="text-center">
            <button onclick="generateIp()" class="bg-dark hover:bg-dark/90 text-white rounded-xl py-4 px-8 transition-all duration-300 btn-shadow hover:btn-hover text-lg font-medium flex items-center justify-center mx-auto">
                <i class="fa fa-refresh mr-2"></i> 重新生成IP
            </button>
        </div>
        
        <!-- 页脚 -->
        <footer class="mt-12 text-center text-sm text-secondary">
            <p>© 2026 IP地址分类挑战 | 学习网络基础知识</p>
        </footer>
    </div>
    
    <script>
        // 生成随机IP地址函数
        function generateIp() {
            let ipParts = [];
            for (let i = 0; i < 4; i++) {
                ipParts.push(Math.floor(Math.random() * 256));
            }
            let ip = ipParts.join('.');
            document.getElementById('ipDisplay').innerText = ip;
            
            // 重置结果显示
            const resultDisplay = document.getElementById('resultDisplay');
            resultDisplay.className = 'result-appear bg-neutral rounded-xl p-6 text-center text-xl font-medium transition-all duration-500 min-h-[100px] flex items-center justify-center';
            resultDisplay.innerText = '请选择一个分类来开始挑战';
            
            // 重置按钮样式
            resetButtonStyles();
            
            // 存储当前正确分类
            window.currentIp = ip;
            window.correctType = getCorrectType(ip);
            
            // 添加生成动画
            const ipBox = document.getElementById('ipDisplay');
            ipBox.classList.add('scale-[1.02]');
            setTimeout(() => {
                ipBox.classList.remove('scale-[1.02]');
            }, 300);
        }

        // 判断IP地址分类的函数
        function getCorrectType(ip) {
            let firstPart = parseInt(ip.split('.')[0]);
            if (firstPart >= 0 && firstPart <= 127) {
                return 'A';
            } else if (firstPart >= 128 && firstPart <= 191) {
                return 'B';
            } else if (firstPart >= 192 && firstPart <= 223) {
                return 'C';
            } else if (firstPart >= 224 && firstPart <= 239) {
                return 'D';
            } else {
                return 'E';
            }
        }

        // 检查答案函数
        function checkAnswer(userChoice) {
            const resultDisplay = document.getElementById('resultDisplay');
            const correctType = window.correctType;
            
            // 高亮正确答案按钮
            highlightCorrectButton(correctType);
            
            if (userChoice === correctType) {
                // 正确答案
                resultDisplay.className = 'result-appear bg-success/10 border-l-4 border-success rounded-xl p-6 text-center text-xl font-medium transition-all duration-500 min-h-[100px] flex items-center justify-center';
                resultDisplay.innerHTML = `
                    <div class="flex items-center justify-center">
                        <i class="fa fa-check-circle text-success text-2xl mr-2"></i>
                        <span>正确！${window.currentIp} 属于${userChoice}类</span>
                    </div>
                `;
                
                // 高亮用户选择的按钮
                document.getElementById(`btn${userChoice}`).classList.add('scale-[1.05]', 'ring-4', 'ring-success');
            } else {
                // 错误答案
                resultDisplay.className = 'result-appear bg-danger/10 border-l-4 border-danger rounded-xl p-6 text-center text-xl font-medium transition-all duration-500 min-h-[100px] flex items-center justify-center';
                resultDisplay.innerHTML = `
                    <div class="flex items-center justify-center">
                        <i class="fa fa-times-circle text-danger text-2xl mr-2"></i>
                        <span>错误！${window.currentIp} 正确分类是${correctType}类</span>
                    </div>
                `;
                
                // 高亮用户选择的按钮（错误）
                document.getElementById(`btn${userChoice}`).classList.add('scale-[1.05]', 'ring-4', 'ring-danger');
            }
        }
        
        // 重置按钮样式
        function resetButtonStyles() {
            ['A', 'B', 'C', 'D', 'E'].forEach(type => {
                const btn = document.getElementById(`btn${type}`);
                btn.className = `bg-blue-${500 - (type.charCodeAt(0) - 'A'.charCodeAt(0)) * 100} hover:bg-blue-${500 - (type.charCodeAt(0) - 'A'.charCodeAt(0)) * 100}/90 text-white rounded-xl py-4 px-2 transition-all duration-300 btn-shadow hover:btn-hover flex flex-col items-center justify-center`;
            });
        }
        
        // 高亮正确按钮
        function highlightCorrectButton(correctType) {
            document.getElementById(`btn${correctType}`).classList.add('ring-4', 'ring-yellow-400');
        }

        // 页面加载时先生成一个IP
        window.onload = generateIp;
    </script>
</body>
</html>
